<!DOCTYPE html>
<html lang="en" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta charset="UTF-8">
    <title>系统首页</title>
    <link rel="stylesheet" href="/elementui/index.css">
    <style>
        a{
            text-decoration: none;
            color:#303133;
            width: 100%;
            height: 100%;
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="app">
        <el-container style="height: 500px; border: 1px solid #eee">
            <el-header style="text-align: right; font-size: 12px">
                <el-dropdown>
                    <i class="el-icon-setting" style="margin-right: 15px"></i>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item>查看</el-dropdown-item>
                        <el-dropdown-item>新增</el-dropdown-item>
                        <el-dropdown-item>删除</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
                <span>
                    <shiro:principal property="realName"></shiro:principal>
                    <button shiro:hasRole="管理员">管理员角色</button>
                    <button shiro:hasRole="一般用户">一般用户角色</button>
                </span>
            </el-header>
            <el-container>
                <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
                    <el-menu :default-openeds="['1']">
                        <el-submenu v-for="menu in menus" :index="menu.id">
                            <template slot="title"><i class="el-icon-message"></i>{{menu.menuName}}</template>
                            <el-menu-item-group>
                                <a v-for="smenu in menu.subMenus" :href="smenu.menuUrl" target="content">
                                    <el-menu-item>{{smenu.menuName}}</el-menu-item>
                                </a>
                            </el-menu-item-group>
                        </el-submenu>
                    </el-menu>
                </el-aside>
                <el-container>
                    <el-main>
                        <iframe name="content" style="width: 100%;height: 100%;border: 0px"></iframe>
                    </el-main>
                </el-container>
            </el-container>
        </el-container>
    </div>
<style>
    .el-header {
        background-color: #B3C0D1;
        color: #333;
        line-height: 60px;
    }

    .el-aside {
        color: #333;
    }
</style>

    <script src="/vue/vue.js"></script>
    <script src="/elementui/index.js"></script>
    <script src="/axios/axios.min.js"></script>
    <script src="/qs/qs.min.js"></script>
    <script>
        new Vue( {
            el:"#app",
            data:{
                    menus:[]
                }
            ,
            mounted(){
                axios.get("/menu/findMenus")
                    .then(res => {
                       if(res.data.code == 1){
                           this.menus = res.data.data;
                       }
                    });
            }
        });
</script>
</body>
</html>